<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .boss {
            position: relative;
            margin: auto;
            width: 800px;
            height: 3000px;
            background-color: pink;
        }

        .bos {

            height: 3000px;
        }

        .menu {
            opacity: 1;
            width: 100%;
            position: fixed;
            top: -100px;
            left: 0;
            height: 100px;
            background-color: greenyellow;
            z-index: 1;
        }

        .box {
            position: absolute;
            top: 300px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="bos">
        <div class="menu"></div>
        <div class="boss">
            <div class="box"></div>
        </div>
    </div>

    <script>
        //经过box，menu显现
        // 设置scrool事件
        //拿到box的位置
        //滚动到相应位置，显现menu
        const box = document.querySelector('.box');
        const menu = document.querySelector('.menu');
        window.addEventListener('scroll', function () {
            const wei = box.offsetTop;
            const num = document.documentElement.scrollTop;
            // if (num >= wei) {
            //     menu.style.top = 0;
            // } else {
            //     menu.style.top = `${-100}px`;
            // }
            menu.style.top = num >= wei ? 0 : `${-100}px`;
        })
    </script>
</body>

</html>